<!--
 * @Author: your name
 * @Date: 2021-12-13 20:44:44
 * @LastEditTime: 2021-12-14 11:35:17
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \day6vue\my-app\src\components\Vswitch.vue
-->
/<template>
    <div class="switch">
        <input type="checkbox" :id="'switch'+name" class="switchinput" @input="changeInput" :checked="value">
        <label :for="'switch'+name" class="switchlable"></label>
    </div>
</template>

<script>
export default {
    props: {
        name:{
            type:String
        },
        value:{
            type:Number
        }
    },
    data () {
        return {
            
        }
    },
    methods: {
        changeInput(e){
            this.$emit('input', e.target.checked*1)
            console.log(e.target.checked);
        }
    }
}
</script>

<style lang="scss" scoped>
.switch{
    flex: 1;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    .switchinput{
        display: none;
    }
    .switchlable{
        width: 60px;
        height: 30px;
        border-radius: 16px;
        border: 1px solid #ccc;
        display: inline-block;
        position: relative;
        margin-top: 5px;
        margin-right: 20px;
    }
    .switchlable::before{
        position: absolute;
        content: "";
        left: 0;
        top: 0px;
        height: 28px;
        width: 28px;
        border-radius: 50%;
        background: #ccc;
        transition: all 0.5s;
    }
    .switchinput:checked+label:before{
        background: blue;
        left: 100%;
        margin-left: -28px;
        transition: all 0.5s;
    }
}
</style>